<template>
	<view>
		<dsl-navbar title="订单列表" bgTopImg="white" isBack></dsl-navbar>
		<view class="bg-white padding">
			<view class="rowsb text-center  solid-bottom ">
				<view v-for="(item,index) in orderClassifyList" :key="index" @click="orderMen(index)">
					<view class="classify_title" :class="{classify_title_active:index ==orderStaus}">{{item.title}}
					</view>
					<view class="classify_heng margin-top-sm" v-if="index == orderStaus"></view>
				</view>
			</view>
		</view>
		<view class="rowsc margin-top" v-for="(item,index) in orderList" :key='index'>

			<view class="order_body">
				<view class="order_head solids-bottom">
					<view class="order_number ">
						订单编号：{{item.orderno?item.orderno:item.order_no}}
					</view>
					<view class="order_type">
						<!-- 待发货 -->
					</view>
				</view>
				<view class="flex margin-top" style="position: relative;">
					<image :src="item.zaxis_image?item.zaxis_image:urls+item.details[0].image" mode="aspectFill">
					</image>
					<view class="margin-left">
						<view class="towlineshow order_title" v-if="item.details"> {{item.details[0].name}}</view>
						<view class="order_num">数量 x1</view>
						<view class="order_pay">¥{{item.deposit?item.deposit:item.total_price}}</view>
					</view>
				</view>
				<view class="justify-end margin-top">
					<view class="order_submit" @click="detailOrder(item)">
						取消订单
					</view>

					<view class="order_submit_fill" @click="payOrder(item)">
						立即支付
					</view>
				</view>
			</view>
		</view>
		<view v-if="orderList==''">
			<moreLoading></moreLoading>
		</view>
	</view>
</template>

<script>
	import {
		getOrderList,
		paymentOrder,
		urls
	} from '@/common/path.js'
	export default {
		data() {
			return {
				orderStaus: 0, //默认选中状态
				orderList: [], //订单列表
				urls: urls
			}
		},
		onLoad() {

		},
		onShow() {
			this.getOrderList() //订单列表
		},
		methods: {
			//订单选择
			orderMen(index) {
				this.orderStaus = index
				this.orderList =[]
				this.getOrderList()
			},
			// 订单列表
			getOrderList() {
				let data = {
					status: this.orderStaus
				}
				this.Http.POST(getOrderList, data)
					.then((res) => {
						console.log('[订单]', res);
						if (res.code == 1) {
							this.orderList = res.data
						}else{
							this.orderList = []
						}
					})
			},
			//订单支付
			payOrder(item) {
				let that = this
				uni.showActionSheet({
					itemList: ['立即支付'],
					success: function(res) {
						if (res.tapIndex == 0) {
								let data = {
									order_no: item.order_no,
									type: 1
								}
								that.Http.POST(paymentOrder, data)
									.then((res) => {
										if (res.code == 1) {
											console.log('[支付]', res.data);
											//微信支付
										uni.requestPayment({
										    nonceStr: res.data.nonceStr, //随机字符串
										    package: res.data.package, //下单接口返回参数
										    timeStamp: res.data.timeStamp, //时间戳
										    signType: res.data.signType, //签名算法，应与后台一致
										    paySign: res.data.paySign, //签名
										    success: function(aaa) {
												that.getOrderList()
										        uni.showToast({ title: '支付成功', icon: 'none' })
										    },
										    fail: function(err) {
										    console.log('支付失败===>', err)
										    },
										})
										}
									})
							
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			//取消订单
			detailOrder(item){
				let that = this
				uni.showActionSheet({
					itemList: ['取消订单'],
					success: function(res) {
						if (res.tapIndex == 0) {
							that.$tools.showToast('暂未开放')
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			}
		},
		

		computed: {
			orderClassifyList() {
				let data = [{
						title: '全部',
						id: 1,
					},
					{
						title: '待付款',
						id: 1,
					},
					{
						title: '待发货',
						id: 1,
					},
					{
						title: '已发货',
						id: 1,
					}
				]
				return data
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F4F6F6;
	}

	.classify_title {
		font-size: 30rpx;
		font-family: PingFang SC;
		opacity: 1;
		color: #757575;
	}

	.classify_title_active {
		font-size: 30rpx;
		font-family: PingFang SC;
		opacity: 1;
		color: #CCB48E;
		font-weight: bold;
	}

	.classify_heng {
		height: 4rpx;
		background: #CCB48E;
		border-radius: 2rpx;
	}

	//订单
	.order_body {
		position: relative;
		padding: 30rpx;
		width: 696rpx;
		height: 440rpx;
		background: #FFFFFF;
		opacity: 1;

		.order_head {
			display: flex;
			justify-content: space-between;
			padding-bottom: 30rpx;
		}

		.order_number {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #3D444D;
		}

		.order_type {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #3D444D;
			opacity: 1;
		}

		image {
			width: 188rpx;
			height: 188rpx;
			background: #EEEEEE;
			opacity: 1;
			border-radius: 17rpx;
		}

		.order_title {
			width: 400rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #4D4D4D;
			opacity: 1;
		}

		.order_num {
			margin-top: 10rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #7D7D7D;
			opacity: 1;
		}

		.order_pay {
			font-size: 29rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #F15E4E;
			opacity: 1;
			position: absolute;
			bottom: 0;
		}

		.order_submit {
			width: 158rpx;
			height: 63rpx;
			background: #C7C7CE;
			color: white;
			opacity: 1;
			line-height: 63rpx;
			border-radius: 999rpx;
			text-align: center;
			margin-right: 30rpx;
		}

		.order_submit_fill {
			width: 158rpx;
			height: 63rpx;
			opacity: 1;
			line-height: 63rpx;
			border-radius: 999rpx;
			text-align: center;
			background: linear-gradient(90deg, #CCB48E 0%, #9F8660 100%);
			color: white;
		}
	}
</style>
